<template>
  <div>
    <div v-if="homeModule" class="homeModule">{{homeModuleText}}</div>
    <div v-else>
      <!-- 项目负责人角色 第一部分 start -->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="myPartOneBox myBg_fff1de">
            <span class="myPartOneTitle">当日用电量</span>
            <img src="/static/images/fc.png" alt="" />
            <div class="myPartOneContent">
              <span class="myResponseText myColor_ffa82e">{{electCurrent}}</span>
              <!-- <span class="myColor_ffa82e">kw·h</span> -->
            </div>
            <a href="javascript:;" class="myPareOneBottom myBg_ffa92e" @click="onMoreElectric">明细数据</a>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="myPartOneBox myBg_def8ff">
            <span class="myPartOneTitle">当日用水量</span>
            <img src="/static/images/sc.png" alt="" />
            <div class="myPartOneContent">
              <span class="myResponseText myColor_2eb3ff">{{waterCurrent}}</span>
              <!-- <span class="myColor_2eb3ff">m³</span> -->
            </div>
            <a href="javascript:;" class="myPareOneBottom myBg_2eb3ff" @click="onMoreWater">明细数据</a>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="myPartOneBox myBg_d3fff9">
            <span class="myPartOneTitle">当月报事总量<!-- 设备正常运行时长 --></span>
            <img src="/static/images/nc.png" alt="" />
            <div class="myPartOneContent">
              <span class="myResponseText myColor_00c2a9">{{complaint_total}}<!-- 120 --></span>
              <span class="myColor_00c2a9">次<!-- h --></span>
            </div>
            <a href="javascript:;" class="myPareOneBottom myBg_00c2a9" @click="onMorePostit">明细数据</a>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="myPartOneBox myBg_dbeaff">
            <span class="myPartOneTitle">当月报修总量<!-- 设备告警数量 --></span>
            <img src="/static/images/lc.png" alt="" />
            <div class="myPartOneContent">
              <span class="myResponseText myColor_6aa3ef">{{repair_total}}<!-- 0 --></span>
              <span class="myColor_6aa3ef">次</span>
            </div>
            <a href="javascript:;" class="myPareOneBottom myBg_6aa3ef" @click="onMoreRepair">明细数据</a>
          </div>
        </el-col>
      </el-row>
      <!-- 项目负责人角色 第一部分 end -->
      
      <!-- 项目负责人角色 第二部分 start-->
      <el-row :gutter="20" class="myPaddingTop_20px">
        <el-col :span="16">
          <!-- 系统公告与咨询 start -->
          <el-row class="mySystemBulletinBox">
            <el-col :span="24" class="myTitle">
              <span class="myText">新闻资讯<!-- 系统公告与咨询 --></span>
              <span class="myMore" @click="onMore">更多&gt;</span>
            </el-col>
            <el-col :span="11" class="myPaddingTop_15px">
              <el-row>
                <el-col :span="7">
                  <img :src="newsOneImg||'static/images/tp@3x.png'" alt="" class="myNewsImg"/>
                </el-col>
                <el-col :span="16" :offset="1">
                  <el-col :span="24" class="myNewsTitle">
                    <a :href=newsOneUrl target="new">{{newsOneTitle}}</a>
                  </el-col>
                  <el-col :span="24" class="myNewsContent">{{newsOneContent}}</el-col>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="11" :offset="2" class="myPaddingTop_15px">
              <el-row>
                <el-col :span="7">
                  <img :src="newsTwoImg||'static/images/tp@3x.png'" alt="" class="myNewsImg"/>
                </el-col>
                <el-col :span="16" :offset="1">
                  <el-col :span="24" class="myNewsTitle">
                    <a :href=newsTwoUrl target="new">{{newsTwoTitle}}</a>
                  </el-col>
                  <el-col :span="24" class="myNewsContent">{{newsTwoContent}}</el-col>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!-- 系统公告与咨询 end -->
          <!-- 报事报修动态 start -->
          <el-row class="myDynamicBox" v-if="isProjectLeader || isCustomerService">
            <el-col :span="24" class="myTitle">
              <span class="myText">报事报修动态</span>
              <span class="myMore" @click="onMoreWork">更多&gt;</span>
            </el-col>
            <el-col :span="6" class="myPaddingTop_15px">
              <div class="myRelative">
                <p class="mySatisfactionText">
                  <span class="mySatisfactionTitle">报事实时满意度</span>
                  <span class="myNo"><i></i> 不满意</span>
                  <span class="myYes"><i></i> 满意</span>
                </p>
              </div>
              <!--报事报修满意度圆饼图 -->
              <vue-highcharts :options="customerStatisfactionOpt" ref="customerStatisfactionChart"></vue-highcharts>
            </el-col>
            <el-col :span="18" class="myPaddingTop_15px">
              <!-- 报事报修走势图 -->
              <vue-highcharts :options="customerTaskOpt" ref="customerTaskChart" class="myChart"></vue-highcharts>
            </el-col>
          </el-row>
          <!-- 报事报修动态 end -->

          <!-- 工程部 设备运行状态 start -->
          <el-row class="myDynamicBox" v-if="isEngineering">
            <el-col :span="24" class="myTitle">
              <span class="myText">设备运行状态</span>
            </el-col>
            <el-col :span="24" class="myPaddingTopBottom_20px myHeight_340px">
              <ul class="myList" id="roomList" v-for="item in devRoomList"><!--  -->
                <li :data-roomid="item.dev_room_id" 
                    :data-duty_user_name="item.duty_user_name" 
                    :data-duty_user_phone="item.duty_user_phone"
                    :data-dev_room_name="item.dev_room_name"
                >
                  <img class="myListImg" :src="'static/images/sbyxzt/home/icon_'+item.dev_room_type+'.png'" alt="" v-if="item.alarm_status==0"/>
                  <img class="myListImg" :src="'static/images/sbyxzt/home/icon_bg_'+item.dev_room_type+'.png'" alt="" v-else/>
                  <span class="myListText">{{item.dev_room_name}}</span>
                </li>
              </ul>
            </el-col>
          </el-row>
          <!-- 工程部 设备运行状态 end -->
        </el-col>
        <el-col :span="8">
          <el-row class="myWorkRemindingBox">
            <el-col :span="24" class="myTitle">
              <span class="myText">工作提醒</span>
              <!-- <el-button type="primary" class="myBgGreen myAdd">添加日程</el-button> -->
            </el-col>
            <el-col :span="24" class="my">
              <!-- 日期控件 -->
              <!-- <div id="calendar" class="style"></div> -->
              <template>
                <el-table
                  v-loading="loading"
                  :data="tableDataList"
                  border
                  height="510"
                  style="width: 100%; overflow-x: hidden;">
                  <el-table-column
                    width="100"
                    label="任务类型">
                    <template scope="scope">
                      {{scope.row.affair_type | onType}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    label="是否逾期">
                    <template scope="scope">
                      <span v-if="scope.row.lefttime<0" style="color: #dd6161" :title="'逾期'+Math.abs(scope.row.lefttime)+'天'">已逾期</span>
                      <span v-if="scope.row.lefttime==0" style="color:#ffab33">即将逾期</span>
                      <span v-if="scope.row.lefttime>0" style="color:#67c23a" :title="'剩余'+scope.row.lefttime+'天'">未逾期</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="工单号">
                    <template scope="scope">
                      <span class="myId">{{scope.row.affair_id}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    label="操作">
                    <template scope="scope">
                      <el-button class="look" type="text" size="small" @click="onDetailed(scope.row.affair_type,scope.row.affair_id)">查看</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 项目负责人角色 第二部分 end-->
      <!-- 项目负责人角色 第三部分 start-->
      <el-row :gutter="20" class="myPaddingTop_20px">
        <el-col :span="12">
          <!-- 项目负责人 设备维保巡检动态 start-->
          <el-row class="myMaintenanceBox" v-if="isProjectLeader || isEngineering">
            <el-col :span="24" class="myTitle">
              <span class="myText">设备维保巡检动态</span>
            </el-col>
            <el-col :span="6">
              <!-- 完成率图表 -->
              <!-- <vue-highcharts :Highcharts="Highcharts"  :options="devMantianCompletedOpt" ref="devMantainCompletedChart"></vue-highcharts> -->
              <div id="devMantainCompletedChart" style="width: 100%"></div>
            </el-col>
            <el-col :span="6">
              <!-- 逾期率图表 -->
              <!-- <vue-highcharts :Highcharts="Highcharts"  :options="devMantianOverdueOpt" ref="devMantainOverdueChart"></vue-highcharts> -->
              <div id="devMantainOverdueChart" style="width: 100%"></div>
            </el-col>
            <el-col :span="12" class="myMaintenanceList">
              <div class="myListBox">
                <ul v-if="tableData!='' && tableData!=null">
                  <li v-for="x in tableData" :class="{yuqi:x.status=='逾期'}">
                    <i></i>
                    <span :title="x.complete_time">{{x.complete_time}}</span>
                    <span><a href="javascript:;" :title="x.task" target="_blank">{{x.task}}</a></span>
                    <span>{{x.deal_user}}</span>
                    <span>{{x.status}}</span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
          <!-- 项目负责人 设备维保巡检动态 end-->
          <!-- 客服部 近期上报情况 start -->
          <el-row class="myMaintenanceBox" v-if="isCustomerService">
            <el-col :span="24" class="myTitle">
              <span class="myText">近期上报情况</span>
            </el-col>
            <el-col :span="6">
              <!-- 完成率图表 -->
              <!-- <vue-highcharts  :options="devMantianCompletedOpt" ref="devMantainCompletedChart"></vue-highcharts> -->
              <div id="devMantainCompletedChart" style="width: 100%"></div>
              <!-- <div :options="devMantianCompletedOpt" ref="devMantainCompletedChart" style="width: 200px; height: 400px;"></div> -->
            </el-col>
            <el-col :span="6">
              <!-- 逾期率图表 -->
              <!-- <vue-highcharts  :options="devMantianOverdueOpt" ref="devMantainOverdueChart"></vue-highcharts> -->
              <div id="devMantainOverdueChart" style="width: 100%"></div>
            </el-col>
            <el-col :span="12" class="myMaintenanceList">
              <div class="myListBox_kf">
                <ul v-if="tableData_kf!='' && tableData_kf!=null">
                  <li v-for="x in tableData_kf">
                    <span>{{x.type}}</span>
                    <span><a href="javascript:;" :title="x.note" target="_blank">{{x.note}}</a></span>
                    <span>{{x.status}}</span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
          <!-- 客服部 近期上报情况 end -->
        </el-col>
        <el-col :span="12">
          <!-- 项目负责人  经营收益动态图表 start -->
          <el-row class="myOperatingIncomeBox" v-if="isProjectLeader">
            <!-- <el-col :span="24" class="myTitle">
              <span class="myText">经营收益动态</span>
            </el-col>
            <el-col :span="10">
              <span class="myOperatingIncomeTitle">年度任务完成情况</span>
              <span class="myOperatingIncomeResponseText">90%</span>
            </el-col>
            <el-col :span="14">
              <vue-highcharts  :options="eBizOpt" ref="eBizChart"></vue-highcharts>
            </el-col> -->
            <el-col :span="24" class="myTitle">
              <span class="myText">品质监察动态</span>
              <span class="myMore" @click="onMoreQuality">更多&gt;</span>
            </el-col>
            <el-col :span="10">
              <span class="myOperatingIncomeTitle">当月品监完成情况</span>
              <span class="myOperatingIncomeResponseText">{{complete_rate}}%</span>
            </el-col>
            <el-col :span="14" style="padding-top: 20px">
              <vue-highcharts :Highcharts="Highcharts" :options="option" ref="visitorChart" style="height: 300px"></vue-highcharts>
            </el-col>
          </el-row>
          <!-- 项目负责人  经营收益动态图表 end -->

          <!-- 工程部  当月维保计划完成情况图表 start-->
          <el-row class="myOperatingIncomeBox" v-if="isEngineering">
            <el-col :span="24" class="myTitle">
              <span class="myText">当月维保计划完成情况</span>
              <span class="myMore" @click="onMoreMaintenance">更多&gt;</span>
            </el-col>

            <el-col :span="24">
              <vue-highcharts  :options="mpOpt" ref="mpChart" class="mpChart"></vue-highcharts>
            </el-col>
          </el-row>
          <!-- 工程部  当月维保计划完成情况图表 end-->

          <!-- 客服部 报事报修事件进度跟踪 start-->
          <el-row class="myOperatingIncomeBox" v-if="isCustomerService">
            <el-col :span="24" class="myTitle">
              <span class="myText">报事报修事件进度跟踪</span>
            </el-col>
            <el-col :span="24" class="myMaintenanceList">
              <div class="myListBox_gz_kf">
                <ul v-if="tableData_gz_kf!='' && tableData_gz_kf!=null">
                  <li v-for="x in tableData_gz_kf">
                    <span>{{x.status}}</span>
                    <span><a href="javascript:;" :title="x.note" target="_blank">{{x.note}}</a></span>
                    <span>{{x.time}}</span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
          <!-- 客服部 报事报修事件进度跟踪 end-->

        </el-col>
      </el-row>
      <!-- 项目负责人角色 第三部分 end-->
    </div>    
  </div>
</template>
<style scoped>
  /*第一部分 start*/
  .myPartOneBox{
    height: 140px;  
    position: relative;
    border-radius: 3px !important;
    overflow: hidden;
  }
  .myBg_fff1de{
    background: #fff1de;
  }
  .myBg_ffa92e{
    background: #ffa92e;
  }
  .myBg_def8ff{
    background: #def8ff;
  }
  .myBg_2eb3ff{
    background: #2eb3ff;
  }
  .myBg_d3fff9{
    background: #d3fff9;
  }
  .myBg_00c2a9{
    background: #00c2a9;
  }
  .myBg_dbeaff{
    background: #dbeaff;
  }
  .myBg_6aa3ef{
    background: #6aa3ef;
  }
  .myPartOneTitle{
    position: absolute; 
    left: 15px; 
    top: 15px;
  }
  .myPartOneBox > img{
    position: absolute; 
    right: 5px; 
    top: 5px;
    width: 60px;
    height: auto;
  }
  .myPartOneContent{
    position: absolute;
    left: 15px;
    top: 40px;
    font-weight: 500;
    font-size: 30px;
  }
  .myPartOneContent > .myResponseText{
    font-size: 50px;
  }
  .myPartOneContent > .myColor_ffa82e{
    color: #ffa82e;
    font-family: "Arial Regular";
  }
  .myPartOneContent > .myColor_2eb3ff{
    color: #2eb3ff;
    font-family: "Arial Regular";
  }
  .myPartOneContent > .myColor_00c2a9{
    color: #00c2a9;
    font-family: "Arial Regular";
  }
  .myPartOneContent > .myColor_6aa3ef{
    color: #6aa3ef;
    font-family: "Arial Regular";
  }
  .myPareOneBottom{
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 30px;
    text-decoration: none;
    font-size: 12px;
    color: #fff;
    font-weight: 500;
    text-align: center;
    line-height: 30px;
    width: 100%;
  }
  /* 第一部分 end */
  
  /* 第二部分 start */
  .myPaddingTop_20px{
    padding-top: 20px;
  }
  .mySystemBulletinBox,.myDynamicBox,.myWorkRemindingBox{
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
    border:1px solid #e9ebec;
    padding: 15px;
    box-sizing: border-box;
  }
  .mySystemBulletinBox{
    height: 165px;
  }
  .myDynamicBox{
    height: 410px;
    margin-top: 20px;
  }
  .myWorkRemindingBox{
    height: 595px;
  }
  .mySystemBulletinBox .myTitle,.myDynamicBox .myTitle,.myWorkRemindingBox .myTitle{
    border-bottom: 1px solid #e9ebec;
    height: 35px;
    padding-bottom: 15px;
    box-sizing: border-box; 
  }
  .myWorkRemindingBox .myTitle{
    margin-bottom: 10px;
  }
  .mySystemBulletinBox .myTitle .myText,.myDynamicBox .myTitle .myText,.myWorkRemindingBox .myTitle .myText{
    color: #2c3e4f;
    font-size: 16px;
    font-weight: 600;
  }
  .myTitle .myMore{
    float: right;
    font-size: 14px;
    color: #00c2a9;
    display: inline-block;
    font-family: "Microsoft YaHei";
    font-weight: 500;
    cursor: pointer;
  }
  .myWorkRemindingBox .myTitle .myAdd{
    float: right;
    position: relative;
    top: -5px;
  }
  .myPaddingTop_15px{
    padding-top: 15px;
  }
  .myNewsImg{
    width: 100%;
    min-width: 100px;
    max-width:126px;
    max-height: 80px;
  }
  .myNewsTitle{
    color: #4e575b;
    font-size: 14px;
    font-weight: 600;
    overflow-x:hidden;
    width: 100%;
    white-space: nowrap;
    text-overflow:ellipsis;
    line-height: 30px;  
  }
  .myNewsContent{
    color: #7e7e7e;
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    overflow: hidden;
  }
  .myRelative{
    position: relative;
    width: 100%;
  }
  .mySatisfactionText{
    position: absolute;
    top: 20px;
    z-index: 1;
    width: 120px;
    left: 50%;
    margin-left: -60px;
    text-align: center;
  }
  .mySatisfactionTitle{
    display: block;
    font-size: 14px;
    color: #7e7e7e;
    line-height: 30px;
  }
  .myNo i,.myYes i{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: text-bottom;
  }
  .myNo i{
    background: #ff5a2e;
  }
  .myYes i{
    background: #00c2a7;
  }
  .calendar{
    background: #fff;
  }
  .myChart{
    width: 100%;
    height: 340px;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  /* 第二部分 end */
  
  /* 第三部分 start */
  .myMaintenanceBox,.myOperatingIncomeBox{
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
    border:1px solid #e9ebec;
    padding: 15px;
    box-sizing: border-box;
    height: 370px;
  }
  .myMaintenanceBox .myTitle,.myOperatingIncomeBox .myTitle{
    border-bottom: 1px solid #e9ebec;
    height: 35px;
    padding-bottom: 15px;
    box-sizing: border-box; 
  }
  .myMaintenanceBox .myTitle .myText,.myOperatingIncomeBox .myTitle .myText{
    color: #2c3e4f;
    font-size: 16px;
    font-weight: 600;
  }
  .myMaintenanceList{
    padding-top: 15px;
    height: 305px;
    box-sizing: border-box;
    background: url("/static/images/index_list_bg.png") no-repeat center center;
    background-size: 30% auto;
  }
  .myMaintenanceList .myListBox{
    height: 100%;
    border-left: 1px solid #e9ebec;
    box-sizing: border-box;
  }
  .myListBox ul{
    background: #fff;
    height: 100%;
    padding-left: 5%;
    overflow-y:scroll; 
  }
  .myListBox ul::-webkit-scrollbar {  
    width:0px;
    height:0px;
  }
  .myListBox ul li:after{
    display: block;
    content: " ";
    clear: both;
    height: 10px;
  }
  .myListBox ul li i{
    float: left;
    display: block;
    width: 10px;
    height: 10px;
    background: #00c2a9;
    border-radius: 50%;
    margin-top: 4px;
    margin-right: 1%;
  }
  .myListBox ul li span{
    float: left;
    display: block;
    overflow-x:hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    text-align: center;
  }
  .myListBox ul li.yuqi i{
    background:rgb(255, 194, 71);
  }
  .myListBox ul li span:nth-child(2){
    width: 30%;
  }
  .myListBox ul li span:nth-child(3){
    width: 40%;
  }
  .myListBox ul li span:nth-child(4){
    width: 14%;
  }
  .myListBox ul li span:nth-child(5){
    width: 10%;
  }
  .myMaintenanceList .myListBox_kf{
    height: 100%;
    border-left: 1px solid #e9ebec;
    box-sizing: border-box;
  }
  .myListBox_kf ul{
    background: #fff;
    height: 100%;
    padding-left: 5%;
    overflow-y:scroll; 
  }
  .myListBox_kf ul::-webkit-scrollbar {  
    width:0px;
    height:0px;
  }
  .myListBox_kf ul li:after{
    display: block;
    content: " ";
    clear: both;
    height: 10px;
  }
  .myListBox_kf ul li span{
    float: left;
    display: block;
    overflow-x:hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    text-align: left;
  }
  .myListBox_kf ul li span:nth-child(1){
    width: 20%;
  }
  .myListBox_kf ul li span:nth-child(2){
    width: 60%;
  }
  .myListBox_kf ul li span:nth-child(3){
    width: 20%;
  }
  .myMaintenanceList .myListBox_gz_kf{
    height: 100%;
    box-sizing: border-box;
  }
  .myListBox_gz_kf ul{
    background: #fff;
    height: 100%;
    padding-left: 5%;
    overflow-y:scroll; 
  }
  .myListBox_gz_kf ul::-webkit-scrollbar {  
    width:0px;
    height:0px;
  }
  .myListBox_gz_kf ul li:after{
    display: block;
    content: " ";
    clear: both;
    height: 10px;
  }
  .myListBox_gz_kf ul li span{
    float: left;
    display: block;
    overflow-x:hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    text-align: left;
  }
  .myListBox_gz_kf ul li span:nth-child(1){
    width: 10%;
  }
  .myListBox_gz_kf ul li span:nth-child(2){
    width: 70%;
  }
  .myListBox_gz_kf ul li span:nth-child(3){
    width: 20%;
  }

  .myOperatingIncomeTitle{
    text-align: center;
    display: block;
    padding-top: 66px;
  }
  .myOperatingIncomeResponseText{
    text-align: center;
    display: block;
    padding-top: 20px;
    font-size: 80px;
    font-weight: 500;
    color: #00c2a9;
  }
  @media screen and (max-width:1400px) {
    .myOperatingIncomeResponseText{
      font-size: 60px;
    }
  }
  /* 第三部分 end */
  .myColorRed{
    color: #f00;
  }
  .myPaddingTopBottom_20px{
    padding: 20px 0;
  }
  .myHeight_340px{
    height: 340px;
    overflow-y: scroll;
  }
  .myHeight_340px::-webkit-scrollbar{
    width: 0;
    height: 0;
  }
  .myList{
    width: 100%;
  }
  .myList li{
    float: left;
    width: 80px;
    height: 80px;
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
    cursor: pointer;
  }
  .myListText{
    color: #333;
    height: 25px;
    line-height: 25px;
    font-weight: 500;
    overflow-x:hidden;
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    text-overflow:ellipsis;
  }
  .myListImg{
    width: 60px;
    height: 60px;
  }
  .mpChart{
    margin-top:20px; 
    height: 300px;
    width: 100%;
  }
  .myId{
    overflow-x:hidden;
    width: 100%;
    white-space: nowrap;
    text-overflow:ellipsis;
  }
  .homeModule{
    text-align: center;
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -7px;
  }
  /*@import '../../../static/global/plugins/fullcalendar/fullcalendar.min.css';*/
</style>
<!-- <style >
   #calendar.style .fc-header{background: #00c2a9;}
   #calendar.style .fc-state-default.fc-corner-left,#calendar.style .fc-state-default.fc-corner-right{background: transparent;border:none;text-shadow:none;box-shadow:none;position: relative;top: 6px;}
   #calendar.style .fc-header-center{padding-bottom: 0;position: relative;top: 6px;}

   #calendar.style .fc-header-center h2{color: #fff;font-size: 16px;}
   #calendar.style .fc-state-default.fc-corner-left span,#calendar.style .fc-state-default.fc-corner-right span{color: #fff;}
   #calendar.style .fc-header-right .fc-state-default{border:0;position: relative;top: 6px;color: #333;}
   #calendar.style .fc-header-right .fc-state-default.fc-corner-left{color: #333;background: #fff;border-right: 1px solid #efefef;}
   #calendar.style .fc-header-right .fc-state-default.fc-corner-left.fc-state-active,#calendar.style .fc-header-right .fc-state-default.fc-state-active{background: #fff;color: #00c2a9;}
   #calendar.style.fc-border-separate tr.fc-last th{height: 40px;line-height: 40px;}
   #calendar.style .fc-state-default{background: #fff;}
   #calendar.style .fc-header-right{position: relative;right: 13px;}
   #calendar.style .fc-border-separate tr.fc-last th{padding: 10px 0;}
   #calendar.style  .fc-border-separate tr td>div{padding: 15px 0;}
   #calendar.style .fc-border-separate tr td>div 
   .fc-day-number{position: relative;right: 0;top: -15px;}
</style> -->
<script>

  // import '../../../static/global/plugins/fullcalendar/fullcalendar.min.js';
  //highcharts插件
  import VueHighcharts from 'vue2-highcharts';
  import Highcharts from  "highcharts";
  import highchartsMore from 'highcharts/highcharts-more';
  import solidGauge from 'highcharts/modules/solid-gauge';
  highchartsMore(Highcharts);
  solidGauge(Highcharts);

  import Metronic from '../../../static/global/js/metronic.js';
  import {setStore,getStore,removeStore} from '@/config/common';
  import { getCurrentPubEnergyTotal } from '@/api/pub_energy';
  import { getNewspaperReportList , getSatisfaction , getCompletionRate , getTrackInfoList , getWork , getMaintenancePlanCount ,getTransactionSituation , getTrackingInformation } from '@/api/index';
  import { getArticleList } from "@/api/contentMGT";
  import { getOrderPriceRate , getOrderList } from "@/api/online";
  import { getDevRoomStatus } from '@/api/dev_monitor';
  import { getLevelArea } from "@/api/area";
  import { getCompletion } from "@/api/quality";
  export default {
    data(){
      return{
        title:"首页",
        glNum:0,
        // 当日水、电总数
        waterCurrent: '',
        electCurrent: '',

        //报事报修图表
        newspaperReportMonth:[],//月份集合
        postIt:[],//报事列表
        repair:[],//报修列表

        satisfaction:"",//满意度
        tableData: [],

        tableDataList:[],

        //新闻
        newsOneImg:"",
        newsOneTitle:"",
        newsOneContent:"",
        newsOneUrl:"",

        newsTwoImg:"",
        newsTwoTitle:"",
        newsTwoContent:"",
        newsTwoUrl:"",

        repair_total:"",
        complaint_total:"",

        loading:false,
        devRoomList:[],
        areaString:"",

        tableData_kf:[],
        tableData_gz_kf:[],

        //显示模块权限
        homeModule:false,
        isProjectLeader:false,//项目负责人-1
        isEngineering:false,//工程部-2
        isCustomerService:false,//客服部-3
        isMultipleMarketing:false,//多种经营-4
        homeModuleText:'',
        Highcharts: Highcharts,
        /*设备完成率*/
        devMantianCompletedOpt:{
            // chart: {
            //     type: 'gauge',
            //     plotBackgroundColor: null,
            //     plotBackgroundImage: null,
            //     plotBorderWidth: 0,
            //     plotShadow: false
            // },
            // title: {
            //     text: '速度仪'
            // },
            // pane: {
            //     startAngle: -150,
            //     endAngle: 150,
            //     background: [{
            //         backgroundColor: {
            //             linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            //             stops: [
            //                 [0, '#FFF'],
            //                 [1, '#333']
            //             ]
            //         },
            //         borderWidth: 0,
            //         outerRadius: '109%'
            //     }, {
            //         backgroundColor: {
            //             linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            //             stops: [
            //                 [0, '#333'],
            //                 [1, '#FFF']
            //             ]
            //         },
            //         borderWidth: 1,
            //         outerRadius: '107%'
            //     }, {
            //         // default background
            //     }, {
            //         backgroundColor: '#DDD',
            //         borderWidth: 0,
            //         outerRadius: '105%',
            //         innerRadius: '103%'
            //     }]
            // },
            // // the value axis
            // yAxis: {
            //     min: 0,
            //     max: 200,
            //     minorTickInterval: 'auto',
            //     minorTickWidth: 1,
            //     minorTickLength: 10,
            //     minorTickPosition: 'inside',
            //     minorTickColor: '#666',
            //     tickPixelInterval: 30,
            //     tickWidth: 2,
            //     tickPosition: 'inside',
            //     tickLength: 10,
            //     tickColor: '#666',
            //     labels: {
            //         step: 2,
            //         rotation: 'auto'
            //     },
            //     title: {
            //         text: 'km/h'
            //     },
            //     plotBands: [{
            //         from: 0,
            //         to: 120,
            //         color: '#55BF3B' // green
            //     }, {
            //         from: 120,
            //         to: 160,
            //         color: '#DDDF0D' // yellow
            //     }, {
            //         from: 160,
            //         to: 200,
            //         color: '#DF5353' // red
            //     }]
            // },
            // series: [{
            //     name: 'Speed',
            //     data: [80],
            //     tooltip: {
            //         valueSuffix: ' km/h'
            //     }
            // }]
            


            // chart: {
            //   type: 'gauge',
            //   plotBackgroundColor: null,
            //   plotBackgroundImage: null,
            //   plotBorderWidth: 0,
            //   plotShadow: false
            // },
            // title: {
            //   text:null,
            //   },
            // credits:{
            //     enabled: false  //去掉版权信息
            // },
            // pane: {
            //     startAngle: -90,
            //     endAngle: 90,
            //     background: {
            //       backgroundColor: "#fff",
            //       innerRadius: '0%',
            //       outerRadius: '0%',
            //       shape: 'arc'
            //     }
            // },
           
            // yAxis: {
            //     min: 0,
            //     max: 100,
            //     minorTickInterval: 'auto',
            //     minorTickWidth: 0, //坐标轴次刻度线的线条宽度。（次刻度线是相对于主刻度线 tick 的） 默认是：0.
            //     minorTickLength: 0, //坐标轴的次刻度线的线条长度。 默认是：2.
            //     minorTickPosition: 'outside', //次刻度线相对于坐标轴轴线的位置。可用的值有 inside 及 outside。 默认是：outside.
            //     minorTickColor: 'red', //坐标轴次刻度线颜色。 默认是：#999999.
            //     tickPixelInterval: 10,//坐标轴主刻度线总数。
            //     tickWidth: 1,//坐标轴主刻度线宽度。
            //     tickPosition: 'inside', //主刻度线相对于坐标轴轴线的位置。可用的值有 inside 及 outside。 默认是：outside.
            //     tickLength: 0, //坐标轴的主刻度线的线条长度。 默认是：2.
            //     tickColor: '#666',
            //     labels: {
            //         step: 10,
            //         rotation: 'auto'
            //     },
            //     title: {
            //         text: '完成率',
            //         y:-80,
            //         style:{
            //           "fontSize": "14px" 
            //         }
            //     },
            //     plotBands: [{
            //         from: 0,
            //         to: 20,
            //         color: '#ff5a2e' // red
            //     }, {
            //         from: 20,
            //         to: 40,
            //         color: '#ffa92e' // yellow
            //     }, {
            //         from: 40,
            //         to: 100,
            //         color: '#00c2a9' // green
            //     }]
            // },
            // series: []
        },
     
      /*设备维保逾期率 start*/
      devMantianOverdueOpt: {
        // chart: {
        //   type: 'gauge',
        //   plotBackgroundColor: null,
        //   plotBackgroundImage: null,
        //   plotBorderWidth: 0,
        //   plotShadow: false
        // },
        // title: {
        //     text:null,
        //     },
        // credits:{
        //     enabled: false  //去掉版权信息
        // },
        //   pane: {
        //     startAngle: -90,
        //     endAngle: 90,
        //     background: {
        //       backgroundColor: "#fff",
        //       innerRadius: '0%',
        //       outerRadius: '0%',
        //       shape: 'arc'
        //     }
        // },
       
        // yAxis: {
        //     min: 0,
        //     max: 100,
        //     minorTickInterval: 'auto',
        //     minorTickWidth: 0, //坐标轴次刻度线的线条宽度。（次刻度线是相对于主刻度线 tick 的） 默认是：0.
        //     minorTickLength: 0, //坐标轴的次刻度线的线条长度。 默认是：2.
        //     minorTickPosition: 'outside', //次刻度线相对于坐标轴轴线的位置。可用的值有 inside 及 outside。 默认是：outside.
        //     minorTickColor: 'red', //坐标轴次刻度线颜色。 默认是：#999999.
        //     tickPixelInterval: 10,//坐标轴主刻度线总数。
        //     tickWidth: 1,//坐标轴主刻度线宽度。
        //     tickPosition: 'inside', //主刻度线相对于坐标轴轴线的位置。可用的值有 inside 及 outside。 默认是：outside.
        //     tickLength: 0, //坐标轴的主刻度线的线条长度。 默认是：2.
        //     tickColor: '#666',
        //     labels: {
        //         step: 10,
        //         rotation: 'auto'
        //     },
        //     title: {
        //         text: '逾期率',
        //         y:-80,
        //         style:{
        //           "fontSize": "14px" 
        //         }
        //     },
        //     plotBands: [{
        //         from: 0,
        //         to: 60,
        //         color: '#00c2a9' // green
        //     }, {
        //         from: 60,
        //         to: 80,
        //         color: '#ffa92e' // yellow
        //     }, {
        //         from: 80,
        //         to: 100,
        //         color: '#ff5a2e' // red
        //     }]
        // },
        // series: []
      },
      /*设备维保逾期率 end*/

      /*报事报修数量走势start*/
      customerTaskOpt:{
          chart: {
              type: 'areaspline'
          },
          title: {
              text: new Date().getFullYear()+'年月份报事报修数量走势',
              style:{
                fontSize:"16px"
              }
          },
          xAxis: {
            tickLength: 5,
            tickmarkPlacement: 'on',
            pointStart:0,
            categories: []
          },
          yAxis: {
              title: {
                  text: ''
              },
              labels: {
                  formatter: function () {
                      return this.value;
                  }
              }
          },
          tooltip: {
              pointFormat: '{point.y:,.0f}'
          },
          credits:{
            enabled: false  //去掉版权信息
          },
          plotOptions: {
              area: {
                  pointStart: 2002,
                  marker: {
                      enabled: false,
                      symbol: 'circle',
                      radius: 2,
                      states: {
                          hover: {
                              enabled: true
                          }
                      }
                  }
              },
              series: {
                  lineWidth: 0
              }
          },
          series: []
      },
      /*报事报修数量走势 end*/

      /*经营收益动态饼状图 start*/
       eBizOpt:{
          chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            spacing : [40, 50 , 120, 50]
           },
          colors:[
                '#ffa92e',//社区超市
                '#00c2a9',//社区餐饮
                '#2eb3ff',//社区团购
               ],
            title:{
              floating:true,
              text: '分类金额占比',
              y:125,
              style: {
                  fontSize:"14px",
                  color: '',
              }
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                      enabled: false
                    },
                    showInLegend: false  
                }
            },
            credits:{
                  enabled: false  //去掉版权信息
                },
            legend: {
                borderWidth: 0,
                y:45
            },
            series: []
      },
      /*经营收益动态饼状图 end*/

      /*报事报修满意度 start*/
      customerStatisfactionOpt: {
          chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          spacing : [0, 20 , 30, 20]
          },
          colors:[
                  '#00c2a7',//第一个颜色
                  '#ff5a2e',//第二个颜色
          ],
          title:{
            floating:true,
            useHtml:true,
            text: '<div>75%<br/>满意度</div>',
            y:180,
            style: {
                color: '#00c2a9',
                fontSize:'14px'
            }
          },
          tooltip: {
              pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
          },
          plotOptions: {
              pie: {
                  allowPointSelect: true,
                  cursor: 'pointer',
                  dataLabels: {
                    enabled: false
                  },
                  showInLegend: false
              }
          },
          credits:{
                enabled: false  //去掉版权信息
              },
          legend: {
              borderWidth: 0,
              y:45
          },
          series: []
      },
      /*报事报修满意度 end*/

      // 工程部 当月维保计划完成情况图表 start
      mpOpt:{
        title: {
            text: ' '
        },
        colors:[
          '#00c2a9',
          '#ffa92e',
          '#2eb3ff'
        ],
        xAxis: {},
        yAxis: {
          title: {
              text: ''
          }
        },
        credits:{
          enabled: false 
        },
        series: []
      },
      // 工程部 当月维保计划完成情况图表 end
      option:{
        chart: {
            zoomType: ''
        },
        title: {
            text: '片区任务情况',
            style: {
              fontSize:'14px'
            }
        },
        subtitle: {
            text: ''
        },
        credits:{
              enabled: false  
        },
        colors:[
            '#ffa92e',
            '#00c2a9',
            '#2eb3ff',
            '#5db0eb',
            '#d87c7a',
            '#8698b5'
        ],
        xAxis: [
            {
              categories: [],
              crosshair: true
            }
        ],
        yAxis: [{ 
            labels: {
                format: '{value}次',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: ' ',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
          }],
        tooltip: {
            shared: true
        },
        series: [
          
        ],
      },
      complete_rate:0
    }
    },
    components: {
      VueHighcharts 
    },
    filters:{
      onType(val){
        let type={
          1:"报修",
          2:"报事",
          3:"维保任务",
          4:"整改任务",
          5:"投诉"
        }
        return type[val];
      },
      onLefttime(val){
        let data="";
        if(val<0){
          data=Math.abs(val);
        }
        return data;
      }
    },
    methods:{
      onDetailed(type,id){//工作提醒查看详细
        let vm=this;
        if(type==1){//报修
          vm.$router.push({
            path:'/yhbxxx',
            query: {id:id}
          })
        }else if(type==2){//报事
          vm.$router.push({
            path:'/yhbsxx',
            query: {id:id}
          })
        }else if(type==3){//维保任务
          vm.$router.push({
            path:'/wbrwglxx',
            query: {type: 'info',id:id}
          })
        }else if(type==4){//整改任务

        }else if(type==5){//投诉
          vm.$router.push({
            path:'/gdglxxx',
            query: {id:id}
          })
        }else{
          return;
        }
      },
      onMore(){
        this.$router.push({
          path:"/newsList"
        })
      },
      onMoreMaintenance(){
        this.$router.push({
          path:"/deviceAnalysis"
        })
      },
      onMoreWater(){
        this.$router.push({
          path:"/nhgl",
          query:{
            type:1
          }
        })
      },
      onMoreElectric(){
        this.$router.push({
          path:"/nhgl",
          query:{
            type:2
          }
        })
      },
      onMorePostit(){
        this.$router.push({
          path:"/yhbs"
        })
      },
      onMoreRepair(){
        this.$router.push({
          path:"/yhbx"
        })
      },
      onMoreWork(){
        this.$router.push({
          path:"/workAnalysis"
        })
      },
      onMoreQuality(){
        this.$router.push({
          path:"/completeSituation"
        })
      },
      fetchCurrentPubEnergyTotal() {
        let vm = this;
        let params = {
          date: vm.currentDate
        };
        getCurrentPubEnergyTotal(vm.areaIds)
        .then(response => {
          let res = response.data;
          for (let i = 0; i < res.length; i++) {
            if (res[i].energy_type == 1) {
              vm.waterCurrent = res[i].quantity;
              vm.waterMonthly = res[i].monthly;
            } else {
             vm.electCurrent = res[i].quantity;
              vm.electMonthly = res[i].monthly;
            }
          }
        })
        .catch(error => {

        })
      },
      onGetNewspaperReportList(){//拉取报事报修图表数据
        let vm=this;
        getNewspaperReportList().then(response => {
          let res=response.data.results;
          let month=new Array(res.length);
          let postit=new Array(res.length);
          let repair=new Array(res.length);
          for(let i=0; i<res.length; i++){
            month[i]=res[i].month;
            postit[i]=res[i].total_complaint;
            repair[i]=res[i].total_repair;
          }
          //console.log(month)
          vm.newspaperReportMonth=month;

          //console.log(postit)
          vm.postIt=postit;

          //console.log(repair)
          vm.repair=repair;
          //
          let customerTaskChart = vm.$refs.customerTaskChart;
          vm.$refs.customerTaskChart.getChart().xAxis[0].setCategories(month)
          vm.$refs.customerTaskChart.getChart().addSeries(
            {
              name: '报事',
              data: postit,
              color: '#a7eae1',
              marker: {
                enabled: false
              }
            }
          )
          vm.$refs.customerTaskChart.getChart().addSeries(
            {
              name: '报修',
              data: repair,
              color: '#b6e4fe',
              marker: {
                enabled: false
              }
            }
          )
        }).catch(error => {
          //console.log("no",error)
        })
      },
      onGetSatisfaction(){//拉取满意度图表数据
        let vm=this;
        getSatisfaction().then(response => {
          let res=response.data;
          let r_myd=parseFloat(res.repair_satisfaction_rate);//报修满意度
          let c_myd=parseFloat(res.complaint_satisfaction_rate);//报事满意度

          vm.repair_total=res.repair_total;//报修总量
          vm.complaint_total=res.complaint_total;//报事总量

          //console.log("+++----",r_myd,c_myd)

          let customerStatisfactionChart = vm.$refs.customerStatisfactionChart;
          vm.$refs.customerStatisfactionChart.getChart().setTitle({text:`<div>${c_myd}%<br/>满意度</div>`})
          vm.$refs.customerStatisfactionChart.getChart().addSeries(
            {
              type: 'pie',
              innerSize: '60%',
              name: '所占比',
              data: [
                  ['满意',c_myd],
                  ['不满意',100-c_myd]
              ]
            }
          )
        }).catch(error => {
          //console.log(error)
        })
      },
      onGetCompletionRate(){//拉取维保完成率和逾期率
        let vm=this;
        let month=new Date().getMonth()+1;
        getCompletionRate(month).then(response => {
          let res=response.data;
          let complete_rate=parseFloat(res.complete_rate);//完成率
          let overdue_rate=parseFloat(res.overdue_rate);//逾期率
          

          Highcharts.chart("devMantainCompletedChart",{
            chart: {
                type: 'solidgauge'
            },
            title: null,
            pane: {
                center: [],
                size: '100%',
                startAngle: -90,
                endAngle: 90,
                background: {
                    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                    innerRadius: '60%',
                    outerRadius: '100%',
                    shape: 'arc'
                }
            },
            tooltip: {
                enabled: false
            },
            yAxis: {
                stops: [
                    [0.1, '#ff5a2e'], 
                    [0.5, '#ffa92e'], 
                    [0.9, '#00c2a9'] 
                ],
                lineWidth: 0,
                minorTickInterval: null,
                tickPixelInterval: 400,
                tickWidth: 0,
                title: {
                    y: -70,
                    text:"完成率"
                },
                labels: {
                    y: 16
                },
                min: 0,
                max: 100
            },
            plotOptions: {
                solidgauge: {
                    dataLabels: {
                        y: 5,
                        borderWidth: 0,
                        useHTML: true
                    }
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: '完成率',
                data: [complete_rate],
                dataLabels: {
                    format: '<div style="text-align:center"><span style="font-size:20px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span>' +
                    '<span style="font-size:12px;color:silver">%</span></div>'
                },
                tooltip: {
                    valueSuffix: ' %'
                }
            }]
          })

          Highcharts.chart("devMantainOverdueChart",{
            chart: {
                type: 'solidgauge'
            },
            title: null,
            pane: {
                center: [],
                size: '100%',
                startAngle: -90,
                endAngle: 90,
                background: {
                    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                    innerRadius: '60%',
                    outerRadius: '100%',
                    shape: 'arc'
                }
            },
            tooltip: {
                enabled: false
            },
            yAxis: {
                stops: [
                    [0.1, '#00c2a9'], 
                    [0.5, '#ffa92e'], 
                    [0.9, '#ff5a2e'] 
                ],
                lineWidth: 0,
                minorTickInterval: null,
                tickPixelInterval: 400,
                tickWidth: 0,
                title: {
                    y: -70,
                    text:"逾期率"
                },
                labels: {
                    y: 16
                },
                min: 0,
                max: 100
            },
            plotOptions: {
                solidgauge: {
                    dataLabels: {
                        y: 5,
                        borderWidth: 0,
                        useHTML: true
                    }
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: '逾期率',
                data: [overdue_rate],
                dataLabels: {
                    format: '<div style="text-align:center"><span style="font-size:20px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span>' +
                    '<span style="font-size:12px;color:silver">%</span></div>'
                },
                tooltip: {
                    valueSuffix: ' %'
                }
            }]
          })


          // let devMantainCompletedChart = vm.$refs.devMantainCompletedChart;
          // vm.$refs.devMantainCompletedChart.getChart().addSeries(
          //   {
          //     name: '完成率',
          //     data: [complete_rate],
          //     tooltip: {
          //       valueSuffix: ' %'
          //     }
          //   }
          // )

          // let devMantainOverdueChart = vm.$refs.devMantainOverdueChart;
          // vm.$refs.devMantainOverdueChart.getChart().addSeries(
          //   {
          //     name: '逾期率',
          //     data: [overdue_rate],
          //     tooltip: {
          //       valueSuffix: ' %'
          //     }
          //   }
          // )

          //console.log("-----",res,complete_rate,overdue_rate)
        }).catch(error => {
          //console.log(error)
        })
      },
      onGetTrackInfoList(){//拉取设备维保跟踪信息列表
        let vm=this;
        getTrackInfoList().then(response => {
          let res=response.data;
          vm.tableData=res;
          // console.log("++++++++",res)
        }).catch(error => {
          //console.log(error)
        })
      },
      onGetWork(){//拉取工作提醒
        let vm=this;
        let user_id=window.localStorage.user_id;
        //console.log("id",user_id)
        vm.loading=true;
        getWork(user_id).then(response => {
          let res=response.data;
          vm.tableDataList=res.rows;
          vm.loading=false;
          //console.log("_+_+_+_+",res)
        }).catch(error => {
          vm.loading=false;
          //console.log(error)
        })
      },
      onGetNews(){//拉取新闻列表
        let vm=this;
        let params={
          page_size:2,
          page_num:1,
          type_list:1
        }
        getArticleList(params).then(response => {
          let res=response.data;
          vm.newsOneImg=res.rows[0].thumbnail;
          vm.newsOneTitle=res.rows[0].title;
          vm.newsOneContent=res.rows[0].digest;
          vm.newsOneUrl=res.rows[0].url;

          vm.newsTwoImg=res.rows[1].thumbnail;
          vm.newsTwoTitle=res.rows[1].title;
          vm.newsTwoContent=res.rows[1].digest;
          vm.newsTwoUrl=res.rows[1].url;
          //console.log("news",res)
        }).catch(error => {
          //console.log(error)
        })
      },
      onGetOrderPriceRate(){//拉取经营收益统计数据
        let vm=this;
        getOrderPriceRate().then(response =>{
          let res=response.data;
          let cs=0,cy=0,tg=0;
          // console.log("000000",res);
          if(res.OBJECT.list){
            if(res.OBJECT.list.length==1){
              cs=res.OBJECT.list[0].Rate*100;//超市
            }
            if(res.OBJECT.list.length==2){
              cs=res.OBJECT.list[0].Rate*100;//超市
              cy=res.OBJECT.list[1].Rate*100;//餐饮
            }
            if(res.OBJECT.list.length==3){
              cs=res.OBJECT.list[0].Rate*100;//超市
              cy=res.OBJECT.list[1].Rate*100;//餐饮
              tg=res.OBJECT.list[2].Rate*100;//团购
            }
          }

          let eBizChart = vm.$refs.eBizChart;
          vm.$refs.eBizChart.getChart().addSeries(
            {
                type: 'pie',
                innerSize: '60%',
                name: '分类金额占比',
                data: [
                    ['社区超市',cs],
                    ['社区餐饮',cy],
                    ['社区团购',tg]
                ],
                dataLabels: {
                  enabled: true
                }
            }
          )

          
        }).catch(error => {
          console.log(error)
        })
      },
      changeLevel(level){
        let vm=this;
        let params={
          level:level
        }
        getLevelArea(params).then(response => {
          let res=response.data;
          let areaIdList=[];
          for(let i=0; i<res.length; i++){
            areaIdList.push(res[i].value);
          }
          vm.ongetCompletion(areaIdList.join(','));
        }).catch(error => {
        })
      },
      ongetCompletion(areaIds){
        let vm=this,params={};
        params={
          plan_id:'',
          type_id:'',
          level:2,
          region:areaIds,
          start_time:vm.GMTToStr(new Date()),
          end_time:vm.GMTToStr(new Date())
        }
        getCompletion(params).then(response => {
          let res=response.data;
          let region=[],total=[],complete=[];
          let visitorChart = vm.$refs.visitorChart;
          vm.complete_rate=res[0].complete_rate;
          for(let i=0; i<res[0].details.length; i++){
            region.push(res[0].details[i].region);
            total.push(res[0].details[i].total);
            complete.push(res[0].details[i].complete);
          }
          vm.$refs.visitorChart.getChart().xAxis[0].setCategories(region);
          vm.$refs.visitorChart.getChart().addSeries(
            {
                name: '总数',
                type: 'column',
                yAxis: 0,
                data: total,
                tooltip: {
                    valueSuffix: '次'
                }
            }
          )
          vm.$refs.visitorChart.getChart().addSeries(
            {
                name: '完成数',
                type: 'column',
                yAxis: 0,
                data: complete,
                tooltip: {
                    valueSuffix: '次'
                }
            }
          )
        }).catch(error => {
        })
      },
      GMTToStr(time){
        let date = new Date(time);
        let Str=date.getFullYear() + '-' +
        (date.getMonth() + 1) 
        //+ '-' + 
        //date.getDate() 
        //+ ' ' + 
        // date.getHours() + ':' + 
        // date.getMinutes() + ':' + 
        // date.getSeconds()
        return Str
      },
      onGetArea(e){//递归拉取登录角色下的所有小区
        let vm=this;
        if(e.children){
          for(let i=0; i<e.children.length; i++){
            vm.onGetArea(e.children[i]);
          }
        }else{
          vm.areaString+=e.value+",";
        }
      },
      onGetDevRoom() {//【工程部】【设备运行状态内设备房列表】
        let vm = this;
        let params = {
          page_num: 1,
          page_size: 10000
        };
        let region=window.localStorage.getItem("region");
        let regionJson=JSON.parse(region);
        for(let i=0; i<regionJson.length; i++){
          vm.onGetArea(regionJson[i]);
        }
        getDevRoomStatus(vm.areaString, params)
        .then(response => {
          let res = response.data;
          let showList=[],
              showItem=[1,2,4,5,6];
          res.rows.map((item,index) => {
            showItem.map((i,j) => {
              if(item.dev_room_type==i){
                showList.push(item)
              }
            })
          })
          vm.devRoomList=showList;
          setTimeout(function(){
            $("#roomList li").click(function(){
              let roomid=$(this).attr("data-roomid");
              let duty_user_name=$(this).attr("data-duty_user_name");
              let duty_user_phone=$(this).attr("data-duty_user_phone");
              let dev_room_name=$(this).attr("data-dev_room_name");
              vm.$router.push({
                path:'/yxztInfor',
                query: {
                  id: roomid, 
                  dutyName: duty_user_name,
                  dutyPhone: duty_user_phone,
                  devRoomName: dev_room_name
                }
              })
            })
          },100)
        })
        .catch(error => {
        })
      },
      onGetMaintenancePlanCount(){//【工程部】拉取当月维保计划完成情况
        let vm=this;
        let params=new Date().getMonth()+1;
        getMaintenancePlanCount(params).then(response => {
          let res=response.data.results;
          let mpName=[],completeNum=[],planNum=[],completeRate=[];
          for(let i=0; i<res.length; i++){
            mpName.push(res[i].dev_type_name);//设备名
            completeNum.push(res[i].complete_num);//完成次数
            planNum.push(res[i].plan_num);//计划次数
            completeRate.push(res[i].complete_rate);//完成率
          }
          let mpChart = vm.$refs.mpChart;
          vm.$refs.mpChart.getChart().xAxis[0].setCategories(mpName);
          vm.$refs.mpChart.getChart().addSeries(
            {
              type: 'column',
              name: '完成次数',
              data: completeNum
            }
          )
          vm.$refs.mpChart.getChart().addSeries(
            {
              type: 'column',
              name: '计划次数',
              data: planNum
            }
          )
          // vm.$refs.mpChart.getChart().addSeries(
          //   {
          //     type: 'spline',
          //     name: '完成概率',
          //     data: completeRate,
          //     marker: {
          //       lineWidth: 2,
          //       lineColor: Highcharts.getOptions().colors[3],
          //       fillColor: 'white'
          //     }
          //   }
          // )

        }).catch(error =>{
          //console.log(error)
        })
      },
      onGetTransactionSituation(){//【客服部】拉取近期报事报修事务情况跟踪
        let vm=this;
        getTransactionSituation().then(response => {
          let res=response.data;
          vm.tableData_kf=res.results;
        }).catch(error => {
        })
      },
      onGetTrackingInformation(){//客服部【拉取报事报修事务情况过程跟踪】
        let vm=this;
        getTrackingInformation().then(response => {
          let res=response.data;
          vm.tableData_gz_kf=res.results;
          // console.log(res);
        }).catch(error => {
        })
      }
      
    },
    created(){
      document.title = '首页';
      let vm=this;
      let userInfo=JSON.parse(window.localStorage.getItem("userInfo"));
      switch(userInfo.home_module_id){
        case 0:
          vm.isProjectLeader=true;
          break;
        case 1://项目负责人-1
          vm.isProjectLeader=true;
          break;
        case 2://工程部-2
          vm.isEngineering=true;
          break;
        case 3://客服部-3
          vm.isCustomerService=true;
          break;
        case 4://多种经营-4
          vm.homeModuleText='该首页模块正在建设';
          vm.isMultipleMarketing=true;
          vm.homeModule=true;
          return false;
          break;
        default:
          vm.homeModuleText='无首页模块权限，如需使用请通知管理员进行配置';
          vm.homeModule=true;
          return false;
          break;
      }
      vm.fetchCurrentPubEnergyTotal();//拉取当日用电量/用水量
      vm.onGetCompletionRate();//拉取维保完成率和逾期率
      vm.onGetTrackInfoList();//拉取设备维保跟踪信息列表
      vm.onGetWork();//拉取工作提醒
      vm.onGetNews();//拉取新闻列表

      //项目负责人
      if(vm.isProjectLeader){
        vm.onGetNewspaperReportList();//拉取报事报修图表数据
        vm.onGetSatisfaction();//拉取满意度图表数据
        //vm.onGetOrderPriceRate();//拉取经营收益统计数据
        vm.changeLevel(2);//拉取品质监察动态数据(2为片区等级)
      }
      //工程部
      if(vm.isEngineering){
        vm.onGetSatisfaction();//拉取满意度图表数据
        vm.onGetDevRoom();//拉取工程部【设备运行状态内设备房列表】
        vm.onGetMaintenancePlanCount()//【工程部】拉取当月维保计划完成情况
      }
      //客服部
      if(vm.isCustomerService){
        vm.onGetNewspaperReportList();//拉取报事报修图表数据
        vm.onGetSatisfaction();//拉取满意度图表数据
        vm.onGetTransactionSituation();//【客服部】拉取近期报事报修事务情况跟踪
        vm.onGetTrackingInformation();//客服部【拉取报事报修事务情况过程跟踪】
      }

      

      





      // $(function () {
        
      //   $(".page-sidebar-menu>li").eq(parseInt(getStore("num"))+1).addClass("open");
        
       
        /*日程提醒*/  
        // function initCalendar() {
        //   if (!jQuery().fullCalendar) {
        //       return;
        //   }
        //   var date = new Date();
        //   var d = date.getDate();
        //   var m = date.getMonth();
        //   var y = date.getFullYear();

        //   var h = {};

        //   if ($('#calendar').width() <= 400) {
        //       $('#calendar').addClass("mobile");
        //       h = {
        //           left: 'title, prev, next',
        //           center: '',
        //           right: 'today,month,agendaWeek,agendaDay'
        //       };
        //   } else {
        //       $('#calendar').removeClass("mobile");
        //       if (Metronic.isRTL()) {
        //           h = {
        //               right: 'title',
        //               center: '',
        //               left: 'prev,next,today,month,agendaWeek,agendaDay'
        //           };
        //       } else {
        //           h = {
        //               left: 'title',
        //               center: '',
        //               right: 'prev,next,today,month,agendaWeek,agendaDay'
        //           };
        //       }
        //   }


        //   $('#calendar').fullCalendar('destroy'); // destroy the calendar
        //   $('#calendar').fullCalendar({ //re-initialize the calendar
        //       disableDragging : false,
        //       header: h,
        //       editable: true,

        //       buttonText: {
        //         today: '今天',
        //         month: '月',
        //         week: '周',
        //         day: '日'
        //       },
        //       allDayText: "全天",
        //       timeFormat: {
        //             '': 'H:mm{-H:mm}'
        //       },
        //       weekMode: "variable",
        //       columnFormat: {
        //             month: 'dddd',
        //             week: 'dddd M-d',
        //             day: 'dddd M-d'
        //       },
        //       titleFormat: {
        //             month: 'yyyy年 MMMM月',
        //             week: "[yyyy年] MMMM月d日 { '&#8212;' [yyyy年] MMMM月d日}",
        //             day: 'yyyy年 MMMM月d日 dddd'
        //       },
        //       monthNames: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
        //       dayNames: ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
        //       header: {
        //             left: 'prev,next today',
        //             center: 'title',
        //             right: 'month,agendaWeek,agendaDay'
        //       },
        //       eventClick: function (date, allDay, jsEvent, view) {
        //             //...
        //       },
        //       events: function (start, end, callback) {
        //             //...
        //           },

        //       events: [{
        //           title: '日程1',
        //           start: new Date(y, m, 1),
        //           backgroundColor: Metronic.getBrandColor('yellow')
        //       }, {
        //           title: '日程2',
        //           start: new Date(y, m, d - 5),
        //           end: new Date(y, m, d - 2),
        //           backgroundColor: Metronic.getBrandColor('blue')
        //       }, 
        //       {
        //           title: '日程8',
        //           start: new Date(y, m, 28),
        //           end: new Date(y, m, 29),
        //           backgroundColor: Metronic.getBrandColor('yellow'),
        //           url: ''
        //       }]
        //   });
        // }
        // initCalendar();

        /*设备维保计划完成情况*/
        // $('.container6').highcharts({
        //     chart: {
        //          type: 'area'
        //     },
        //     colors:[
        //             '#00c2a7',
        //             '#ffaa2f'
        //           ],
        //     title: {
        //         text: '2017年设备及维保关键数据指标'
        //     },
        //     legend: {
        //         align: 'center',
        //         verticalAlign: 'bottom'
        //     },
        //     xAxis: [{
        //         categories: ['2017-8-10', '2017-8-11', '2017-8-12', '2017-8-13', '2017-8-14', '2017-8-15','2017-8-16'],
        //         crosshair: true,
        //         labels: {
        //                   style: {
        //                       fontSize:'14px'  //字体
        //                   },

        //               }
        //     }],
        //     yAxis: [
               
        //       { 
        //           title: {
        //               text: '',
                     
        //           },
        //           labels: {
        //               format: '{value}%',
                      
        //           },
        //           opposite: true
        //       },
        //       { 
        //           labels: {
        //               format: '{value}',
                      
        //           },
        //           title: {
        //               text: '',
                      
        //           }
        //       }
        //     ],
        //     credits:{
        //       enabled: false  //去掉版权信息
        //     },
        //     tooltip: {
        //         shared: true
        //     },          

        //     series: [
        //       {
        //           name: '设备维保计划数量',
        //           type: 'column',
        //           yAxis: 1,
        //           data: [49, 71, 16, 9, 4, 16, 35],
        //           tooltip: {
        //               valueSuffix: ' '
        //           }
        //       },
        //       {
        //           name: '完成数量',
        //           type: 'column',
        //           yAxis: 1,
        //           data: [20, 30, 6, 19, 50, 6, 15],
        //           tooltip: {
        //               valueSuffix: ' '
        //           }
        //       },
        //       {
        //           name: '逾期率',
        //           type: 'spline',
        //           data: [7, 6, 9, 14, 18, 21, 25],
        //           tooltip: {
        //               valueSuffix: ''
        //           }
        //       }
        //     ]
        // });

        /*客户历史反馈数据动态饼状图*/
        // $('.containerkh').highcharts({
        //     chart: {
        //         plotBackgroundColor: null,
        //         plotBorderWidth: null,
        //         plotShadow: false
        //     },
        //     title: {
        //         text: '意见收集'
        //     },

        //     tooltip: {
        //         pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        //     },
        //     plotOptions: {
        //         pie: {
        //             allowPointSelect: true,
        //             cursor: 'pointer',
        //             dataLabels: {
        //                 enabled: true,
        //                 format: '<b>{point.name}</b>: {point.percentage:.1f} %',
        //                 style: {
        //                     color: (highcharts.theme && highcharts.theme.contrastTextColor) || 'black'
        //                 },
        //                 connectorColor: 'silver'
        //             }
        //         }
        //     },
        //     credits:{
        //       enabled: false  //去掉版权信息
        //     },
        //     series: [{
        //         type: 'pie',
        //         name: '所占比',
        //         data: [
        //             ['1分', 50],
        //             ['2分', 30],
        //             ['3分', 30],
        //             ['4分', 30],
        //             ['5分', 30]
        //         ]
        //     }]
        // });

        /*报事历史动态柱状图*/
        // $('.containerbs').highcharts({
        //         chart: {
        //             type: 'column'
        //         },
        //         title: {
        //             text: '报事动态'
        //         },
        //         xAxis: {
        //             title: {
        //                 text: '2017月份'
        //             },
        //             categories: ['1', '2', '3', '4', '5','6', '7', '8', '9', '10', '11', '12']
        //         },
        //         yAxis: {
        //             min: 0,
        //             title: {
        //                 text: '完成率%'
        //             },
        //             stackLabels: {
        //                 enabled: true,
        //                 style: {
        //                     fontWeight: 'bold',
        //                     color: (highcharts.theme && highcharts.theme.textColor) || 'gray'
        //                 }
        //             }
        //         },
        //         legend: {
        //             align: 'center',
        //             verticalAlign: 'bottom'
        //         },
        //         credits:{
        //           enabled: false  //去掉版权信息
        //         },
        //         tooltip: {
        //             formatter: function () {
        //                 return '<b>' + this.x + '</b><br/>' +
        //                     this.series.name + ': ' + this.y + '<br/>' +
        //                     '总量: ' + this.point.stackTotal;
        //             }
        //         },
        //         plotOptions: {
        //             column: {
        //                 stacking: 'normal',
        //                 dataLabels: {
        //                     enabled: true,
        //                     color: (highcharts.theme && highcharts.theme.dataLabelsColor) || 'white',
        //                     style: {
        //                         textShadow: '0 0 3px black'
        //                     }
        //                 }
        //             }
        //         },
        //         series: [{
        //             name: '未完成',
        //             data: [25, 40, 40, 30, 50,45, 30, 35, 40, 45,35,50]
        //         }, {
        //             name: '待完成',
        //             data: [20, 25, 30, 40, 20,40, 30, 35, 40, 10,35,25]
        //         }, {
        //             name: '已完成',
        //             data: [55, 35, 30, 30, 30,15, 40, 30, 20, 45,30,25]
        //         }]
        // });

        /*报修历史动态柱状图*/
        // $('.containerbx').highcharts({
        //         chart: {
        //             type: 'column'
        //         },
        //         title: {
        //             text: '报修动态'
        //         },
        //         xAxis: {
        //             title: {
        //                 text: '2017月份'
        //             },
        //             categories: ['1', '2', '3', '4', '5','6', '7', '8', '9', '10', '11', '12']
        //         },
        //         yAxis: {
        //             min: 0,
        //             title: {
        //                 text: '完成率%'
        //             },
        //             stackLabels: {
        //                 enabled: true,
        //                 style: {
        //                     fontWeight: 'bold',
        //                     color: (highcharts.theme && highcharts.theme.textColor) || 'gray'
        //                 }
        //             }
        //         },
        //         legend: {
        //             align: 'center',
        //             verticalAlign: 'bottom'
        //         },
        //         credits:{
        //           enabled: false  //去掉版权信息
        //         },
        //         tooltip: {
        //             formatter: function () {
        //                 return '<b>' + this.x + '</b><br/>' +
        //                     this.series.name + ': ' + this.y + '<br/>' +
        //                     '总量: ' + this.point.stackTotal;
        //             }
        //         },
        //         plotOptions: {
        //             column: {
        //                 stacking: 'normal',
        //                 dataLabels: {
        //                     enabled: true,
        //                     color: (highcharts.theme && highcharts.theme.dataLabelsColor) || 'white',
        //                     style: {
        //                         textShadow: '0 0 3px black'
        //                     }
        //                 }
        //             }
        //         },
        //         series: [{
        //             name: '未完成',
        //             data: [25, 40, 40, 30, 50,45, 30, 35, 40, 45,35,50]
        //         }, {
        //             name: '待完成',
        //             data: [20, 25, 30, 40, 20,40, 30, 35, 40, 10,35,25]
        //         }, {
        //             name: '已完成',
        //             data: [55, 35, 30, 30, 30,15, 40, 30, 20, 45,30,25]
        //         }]
        // });

        
      // });

    }

  }
</script>  

  

